<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="600px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <div class="tabel_box">
        <p>文章审核未通过将不在前端显示，通过后用户可在前端查看</p>
        <div class="change_box">
          <el-radio v-model="status" :label="'1'">已通过</el-radio>
          <el-radio v-model="status" :label="'2'">未通过</el-radio>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sumit" :loading="sumitLoading">确认提交</el-button>
          <el-button @click="cancel">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    kyyArticleExamine
  } from "@/api/kyyOfficialWebsite";
  export default {
    // dicts: ['asset_card_type'],
    name: "toExamineDialog",
    components: {

    },
    data() {
      return {
        loading: false,
        labelWidth: '90px',
        inputWidth: '200px',
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "文章审核",
        // 是否显示弹出层
        visible: false,
        status: '1', //文章状态(1已通过 2未通过)
        sumitLoading: false,
      };
    },
    created() {

    },
    methods: {
      /** 打开弹窗 */
      open(id, status) {
        this.id = id
        this.status = status
        this.visible = true
      },
      // 取消按钮
      cancel() {
        this.visible = false;
      },
      //确认提交
      sumit() {
        var params = {
          id: this.id,
          status: this.status
        };
        this.sumitLoading = true
        kyyArticleExamine(params).then((res) => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            setTimeout(() => {
              this.cancel();
              this.$emit('refresh')
              this.sumitLoading = false;
            }, 500);
          })
          .catch(() => {
            this.sumitLoading = false;
          });
      },
    }
  };

</script>
<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }

  .tabel_box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tabel_box p {
    font-size: 15px;
  }

  .change_box {
    margin: 20px 0 30px;
  }

</style>
